<template>
	<view>
		<!-- <view class="icon">
			<image src="/static/img/success.png"></image>
		</view> -->
		<view class="content">
			<view class="tis">
				订单支付
			</view>
			<view class="pay-amount">
				支付金额:{{amount}}元
			</view>
			<view class="back">
				<view class="btn" @tap="gzPay">立即支付</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		WechatGzPay,
		WxConfig
	} from "@/api/api.js"
	var jweixin;
	// #ifdef H5
	jweixin = require('jweixin-module');
	// #endif

	export default {
		data() {
			return {
				amount: 0,
				order_id: '',
				code: ''
			};
		},
		onLoad(e) {
			this.amount = parseFloat(e.amount).toFixed(2);
			this.order_id = e.order_id
			this.code = e.code
			// #ifdef H5
			this.wxconfig()
			// #endif

		},
		methods: {
			wxconfig() {
				WxConfig({
					url: location.href.split('#')[0]
				}).then(res => {
					console.log('配置', res);
					let param = res.data
					jweixin.config({
						debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: param.appid, // 必填，公众号的唯一标识
						timestamp: param.timeStamp, // 必填，生成签名的时间戳
						nonceStr: param.nonceStr, // 必填，生成签名的随机串
						signature: param.signature, // 必填，签名
						jsApiList: [ //这里是需要用到的接口名称  
							'checkJsApi', //判断当前客户端版本是否支持指定JS接口  
							// 'onMenuShareAppMessage', //分享接口  
							// 'getLocation', //获取位置  
							// 'openLocation', //打开位置  
							'scanQRCode', //扫一扫接口  
							'chooseWXPay', //微信支付  
							// 'chooseImage', //拍照或从手机相册中选图接口  
							// 'previewImage', //预览图片接口  
							// 'uploadImage' //上传图片  
						], // 必填，需要使用的JS接口列表
						// openId: t_openid
					});
					jweixin.ready(function() {
						console.log('jweixin.ready');
						// this.wxopenid()
					});
					jweixin.error(function(res) {
						console.log('jweixin.error', res);
						// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
						/*alert("config信息验证失败");*/
					});
				})
			},
			gzPay() {
				WechatGzPay({
					order_id: this.order_id,
					code: this.code
				}).then(res => {
					console.log(res);
					if (res.status == 0) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						return false
					}
					var param = JSON.parse(res.data)

					jweixin.ready((suc) => {
						console.log(suc);
						jweixin.chooseWXPay({
							timestamp: param
								.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
							nonceStr: param.nonceStr, // 支付签名随机串，不长于 32
							package: param
								.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
							signType: param.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
							paySign: param.paySign, // 支付签名
							success: function(data) {
								// 支付成功后的回调函数
								console.log(data);
							},
							cancel: function(data1) {
								uni.showToast({
									title: "付款失败！",
									duration: 1000
								})

							},
							fail: function(data2) {
								uni.showToast({
									title: "付款失败！",
									duration: 1000
								})

							}
						})
					})
				})

			}
		},
	}
</script>

<style lang="scss">
	view {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.icon {
		width: 100%;
		margin-top: 10vw;

		image {
			width: 25vw;
			height: 25vw;
		}
	}

	.tis {
		width: 100%;
		margin-top: 20upx;
		font-size: 48upx;
	}

	.pay-amount {
		width: 100%;
		margin-top: 10upx;
		font-size: 32upx;
	}

	// .back {
	// 	position: absolute;
	// 	width: 100%;
	// 	bottom: 80upx;

	// 	.btn {
	// 		padding: 0 50upx;
	// 		height: 70upx;
	// 		border: solid 2upx #f06c7a;
	// 		color: #f06c7a;
	// 		align-items: center;
	// 		border-radius: 10upx;
	// 		font-size: 34upx;
	// 	}
	// }
	.content {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.back {
		margin-top: 100upx;
		width: 100%;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;

		.btn {
			width: 100%;
			height: 80upx;
			border-radius: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			background-color: #07C160;
			box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.2);
		}

	}
</style>